import React from 'react';
import { Spin } from 'antd';
import LeftComponents from './components/left-components';
import RightComponents from './components/right-components';
import './style.less';
import store from '@store/index';
import Loading from '@components/ui/loading';
import { observer } from 'mobx-react-lite';
const Login = () => {
    const { uiData } = store;
    const [loginStatus, setLoginStatus] = React.useState('logined'); // 用户登录的状态
    const [step, setStep] = React.useState(1); // 用户登录的状态

    const changeLoginStatus = React.useCallback((value?: string) => {
        setLoginStatus(value || '');
    }, []);

    const changeStep = React.useCallback((num?: number) => {
        setStep(num);
    }, []);

    return (
        <div className="login-container">
            <div className="login-left-container hidden-xs">
                <LeftComponents loginStatus={loginStatus} step={step}></LeftComponents>
            </div>
            <div className="login-right-container">
                <Spin size="large" indicator={<Loading />} spinning={uiData.spinning} style={{ height: '100%' }}>
                    <RightComponents loginStatus={loginStatus} step={step} onChangeStep={changeStep} changeLoginStatus={changeLoginStatus}></RightComponents>
                </Spin>
            </div>
        </div>
    );
};
export default observer(Login);
